Bab 1 


san na an angan ay 
Joomla, Dasar-Dasar! 


Joomla itu merupakan Content Management System yang gampang- 
gampang susah. Dibilang gampang, nyatanya Joomla tidak seperti 
Wordpress yang begitu sederhana. Namun dibilang mudah, Joomla 
faktanya hanya membutuhkan kebiasaan-kebiasaan yang harus Anda 
pahami terlebih dulu. Nah di bab ini, Anda akan melihat berbagai tip 
dan trik yang berkaitan dengan dasar-dasar Joomla. 


Tip dan Trik Seputar Global Configuration 


Global Configuration adalah setting Joomla yang bersifat menyeluruh. 
Umumnya, pengaturan yang Anda buat lewat Global Configuration 
akan menyebabkan seluruh situs ikut terpengaruh. Sebagai contoh, 
Anda bisa menonaktifkan situs hanya lewat satu pilihan saja. Ada 
beberapa fitur penting lainnya yang perlu diketahui. Untuk masuk ke 
dalam Global Configuration, cukup klik ikon Global Configuration. 


JA Extension Manager 


" Language Manager 


M3 Global Configuration 


@ Template Manager 


Pilihlah Global Configuration untuk mengatur setting yang 
bersifat memengaruhi seluruh situs 


Jika Situs Sedang Dirancang, Maka Buatlah Offline 

Kalau Anda sedang membuat situs Joomla dan proses pembuatan itu 
belum selesai, maka akan lebih baik jika situs tersebut dibuat offline 
terlebih dulu. Caranya, aktifkan opsi Yes pada pilihan Site Offline. 


Site Name " Your Joomla! Site hosted with Cloud 


Site Offline 


Offline Message se Custom Message ” 


Custom Message This site is down for 
maintenance. «br /s Please 


Opsi yang membuat situs menjadi offline dan tidak bisa diakses 


Pesan yang Sebaiknya Ditulis Ketika Situs dalam Kondisi 
Offline 


Ketika situs dalam kondisi offline, Anda bisa memutuskan untuk me- 
ninggalkan pesan yang akan dibaca oleh pengunjung setiap kali masuk 
ke dalam situs tersebut. Untuk membuat agar ada pesan yang di- 
tinggalkan di dalam situs ketika dalam kondisi offline, maka: 


1. Klik pada opsi Use Custom Message. 


2. Lantas, ketiklah pesan yang ingin Anda sampaikan kepada para 
pengunjung di dalam kotak teks Custom Message. 


Offline Message Use Custom Message 


Custom Message This site is down for 
maintenance.«br /5 Please 


Offline Image e Select | X 


Mengaktifkan opsi Use Custom Message dan tulislah pesan 
yang ingin disampaikan kepada para pengunjung situs 


Nah, apa saja yang ingin disampaikan kepada para pengunjung? Tulis- 
lah paling tidak: 


e Permohonan maaf karena situs sedang didesain sehingga tidak 
bisa dikunjungi untuk sementara waktu. 


e Alamat email agar pengunjung bisa menghubungi Anda bila- 
mana ada perkara penting yang harus diselesaikan. 


e Nomor telepon bilamana Anda sudah menyiapkan staf khusus 
yang akan merespon setiap panggilan telepon yang masuk. 


Mengatur Lama Cepatnya Logout dari Administrator 


Halaman Administrator dibuat sedemikian rupa sehingga jika tidak ada 
aktivitas apa pun, maka akan mengakibatkan sistem me-logout secara 
otomatis dari halaman itu. Jadi untuk masuk kembali ke dalam ha- 
laman Administrator, maka Anda harus melakukan login kembali. 


Yang bisa Anda lakukan adalah mengatur berapa lama sistem akan me- 
logout secara otomatis dari halaman Administrator. Caranya: 


1. Klik menu System. 


2. Kemudian, masukkan angka ke dalam kotak teks Session 
Lifetime. 


Session Settings 


Session Lifetime " 15 


Session Handler " Database “ 


Isilah dengan waktu untuk mengukur berapa lama sistem akan 
me-logout dari halaman Administrator 


Angka yang Anda masukkan diwakili oleh satuan menit sehingga jika 
mengetik angka 15, maka itu artinya sistem akan me-logout secara 
otomatis ketika dalam jangka waktu 15 menit itu tidak ada aktivitas apa 
pun yang terjadi. 


Mengatur Server Time Zone 


Setiap kali mem-posting informasi, entah berbentuk teks maupun foto, 
akan ada tanggal yang menandai kapan informasi itu ditulis. Nah, 
tanggal dan waktu itu akan disesuaikan dengan sistem waktu yang 
berlaku di server. Kalau Anda melihat ada perbedaan waktu dengan 
sistem waktu yang berlaku di wilayah Anda, maka aturlah dengan cara: 


1. Klik menu Server. 
2. Pilihlah menu kombo Server Time Zone. 


3. Carilah opsi Jakarta. 


Location Settings 


Server Time Zone " Universal Time, Coordinated ( & 


Jakartal 


Enable FTP Ni 


Memilih opsi Jakarta pada pilihan Server Time Zone 


FTP Settings 


Jika menggunakan opsi Jakarta, maka sistem waktu yang berlaku adalah 
waktu Indonesia Barat. 


Trik Melihat Artikel-Artikel yang Populer 


Seiring waktu, Anda akan menulis banyak sekali artikel. Lantas, mana 
di antara artikel-artikel itu yang populer? Untuk melihatnya, cukup 
masuk ke dalam Administrator Joomla dan klik panel Top 5 Popular 
Articles. Nanti akan terlihat deretan artikel populer, lengkap dengan 
jumlah Hits (mengukur berapa banyak artikel itu diklik). 


» Last 5 Logged-in Users 
“ Top 5 Popular Articles 


Popular Items Created Hits 


Photoshop Top Model 2013-01-12 13:14:11 
Weblinks Module 
MM Buku Pintar HTML5 « CSS3 # DreamWeaver CS6 


Getting Help 


Mengenal Levels, Curves, dan Histogram Photoshop 


» Last 5 Added Articles 


Membuka panel untuk melihat lima artikel terbaik 


Tip dan Trik Seputar Artikel 


Sama seperti situs-situs lainnya, kekuatan Joomla sebenarnya terletak 
pada artikel-artikel yang Anda buat sendiri. Di bawah ini tersaji tip dan 
trik seputar pembuatan artikel menggunakan Joomla. 


Mengaktifkan atau Menonaktifkan Artikel 


Artikel-artikel yang sudah Anda buat akan disajikan dalam bentuk 
daftar. Di sebelah kanan kolom Title (tempat daftar judul disajikan), 
terdapat kolom Status. Terdapat ikon berwarna hijau atau merah di 
situ. Warna hijau mengindikasikan kalau artikel itu dalam kondisi aktif. 
Sedangkan warna merah mengindikasikan kalau artikel itu sedang 
dalam kondisi non-aktif sehingga tidak akan ditampilkan di dalam 
situs. Untuk mengubah kondisi tersebut, aktif menjadi tidak aktif—dan 
sebaliknya—cukup klik pada ikon hijau atau merah itu. 


Title & Status Featured 


About Us 
about-us 


Buku Pintar HTML5 - CSS3 - DreamWeaver CS6 


buku-pintar-htmlS-css3-dreamwe -CS6 


— Kiat Mencari Uang dari Bisnis Fotografi DSLR o 


kiat-mencari-uang-dari-bisnis-fotografi-dslr 


Mengenal Levels, Curves, dan Histogram Photoshop o 


( mengenal-levels-curves-dan-histogram-photoshop 


Ikon-ikon yang mengindikasikan status artikel apakah dalam 
kondisi aktif atau tidak aktif 


Mengakhiri Sebuah Artikel 


Joomla memiliki fitur unik seputar artikel. Salah satunya adalah Finish 
Article. Fungsinya adalah untuk mengakhiri “masa tayang” artikel pada 
tanggal tertentu. Dengan adanya fitur ini, maka Anda bisa membuat 
artikel-artikel yang memiliki masa tayang, seperti: 


e Informasi diskon atau program promosi yang berlaku dari satu 
tanggal hingga tanggal lainnya. 


e Pemberitahuan yang sifatnya temporer, misalnya libur hari 
raya atau pindahan kantor. 


e Permohonan maaf karena ada upgrade system. 


e Dan seterusnya. 


Untuk mengakhiri masa tayang sebuah artikel, klik tab Publishing 


Options. Setelah itu, klik ikon ui dan pilihlah tanggal yang di- 
inginkan pada menu Finish Publishing. 


? January, 2013 x 


« « Today ,» » 
vek Mon Tue Wed Thu Fri 

s2 oa 

1 7 8 910 1 
Article P5 14 45 16 17 18 
3 AN 2 3 24 25 
- 


2 30 31 


Select a date. 


Memilih opsi Finish Publishing dan tentukan waktu untuk 
mengakhiri masa tayang artikel itu 


Supaya Terlihat Berapa Banyak Sebuah Artikel Dibaca 


Apakah Anda ingin agar pengunjung tahu seberapa banyak sebuah 
artikel telah dibaca? Kalau demikian, klik tab Article Options. Setelah 
itu, klik menu kombo Show Hits dan pilihlah Show. 


Show Hits Use Global | Hide 
Show Unauthorised Links Use Global No Yes 
Positioning of the Links UE) MM Above | Below 


Pilih Show Hits dan klik pada pilihan Show 


Untuk Memudahkan Distribusi Artikel 


Ada kalanya, para pengelola situs membiarkan artikel-artikel yang ada 
di situs didistribusikan agar tercipta efek getok tular. Beberapa metode 
untuk mendistribusikan artikel antara lain: via email atau di-print. Nah, 
agar siapapun—termasuk para pengunjung—bisa mendistribusikan 


artikel yang Anda tulis menggunakan email atau print, maka: 
e Aktifkan menu Show Print Icon dan pilihlah Show. 


e Aktifkan menu Show Email Icon dan pilihlah Show. 


Show Print Icon Use Global 
Show Email Icon Use Global 
Show Voting Hide Show 
Show Hits Hide Show 


Pilihlah Show untuk opsi Show Print Icon dan Show Email Icon 


Nanti kedua ikon itu, Print dan Email, akan diletakkan di pojok kanan 
atas pada bodi artikel. Lihatlah posisinya seperti gambar di bawah ini: 


Buku Pintar HTML5 4 CSS3 # DreamWeaver CS6 


Category: Buku Komputer 

Published on Monday, 14 January 2013 16:34 
Written by Super User 

Hits: 25 


Aa | Jika Anda ingin belajar membuat website "masa depan", mulailah belajar 
HTML5 dan CSS3 sekaligus 
iris, SS3 Alasannya, karena baik HTML5 maupun CSS3 akan menjadi standar desain 
#DREAMWEAVER CS6 website dalam beberapa tahun ke depan 


Oleh karena itu, supaya tidak ketinggalan jaman, Anda harus menguasai dua 
script tersebut mulai dari sekarang dengan membaca buku ini. 


Di dalam buku ini, Anda akan mempelajari konsep dasar HTML5, termasuk 


| memahami mengapa HTML5 disebut semantik dan apa peran CSS3 serta 
JavaScript bagi script tersebut 


Ikon Print dan Email yang ada di pojok kanan atas artikel 


Memecah Artikel Menjadi Dua Bagian Menggunakan 
Read More 


Artikel yang panjang sebaiknya dipecah menjadi dua bagian agar ketika 
disajikan tidak membuat sesak jendela browser. Ketika sudah dipecah, 
pengunjung akan membaca tulisan Read More seperti berikut. 


Buku Pintar HTML5 # CSS3 4 DreamWeaver CS6 


Aa Jika Anda ingin belajar membuat website "masa depan", mulailah belajar HTML5 dan 
CSS3 sekaligus 
BUKU PINTAR 
HTMLS, 
HDREAMWEAVER CS6 dalam beberapa tahun ke depan 


Alasannya, karena baik HTML5 maupun CSS3 akan menjadi standar desain website 


Oleh karena itu, supaya tidak ketinggalan jaman, Anda harus menguasai dua script 
tersebut mulai dari sekarang dengan membaca buku ini 


Di dalam buku ini, Anda akan mempelajari konsep dasar HTML5, termasuk memahami 
mengapa HTML5 disebut semantik dan apa peran CSS3 serta JavaScript bagi script 
tersebut 


2 Read more: Buku Pintar HTML5 - CSS3 - DreamWeaver CS6 


Rp.49,800.00 
@uantity: 1 


Tulisan “Read More” untuk membaca artikel secara utuh 


Agar artikel itu bisa dipecah menjadi dua bagian, maka lakukan 
langkah-langkah di bawah ini: 


1. Letakkan kursor di tempat pemecahan artikel. Jadi, tulisan yang 
ada di bawah kursor akan dipecah menjadi halaman khusus. 


2. Tekan tombol Read More sampai muncul garis pemisah berwarna 
merah putus-putus. 


Oleh karena itu, supaya tidak ketinggalan jaman, Anda harus menguasai dua script tersebut mulai dari sekarang 
dengan membaca buku ini. 


Di dalam buku ini, a akan mempelaiari konsep dasar HIML5, termasuk memahami mengapa HIMLS disebut 
semantik dan ana peran CSS3 serta JavaScript bagi script tersebut. 


Anda akan mempelajari tag-tag baru, termasuk Canvas, serta mengatur bagaimana halaman website akan terlihat 


cantik di dalam jendela browser. . 
Path: p» span PF 
5 @ Toggle editor 
C3 Article Rs Image & Page Break V Read More pen 


Tombol Read More untuk memecah artikel menjadi dua bagian 


Mengganti Tulisan “Read More” 


Tulisan “Read More” akan muncul secara otomatis kalau Anda memu- 
tuskan untuk memecah artikel menjadi dua bagian. Tapi tahukah Anda 
kalau tulisan itu bisa diganti menggunakan bahasa Anda sendiri? 
Caranya: 


1. Pastikan Anda sudah memecah artikel itu menjadi dua bagian 
menggunakan tombol Read More. 


2. Bukalah tab Article Options. 


3. Ketik teks yang ingin dipakai untuk menggantikan Read More di 
dalam kotak teks Read More Text. 


Positioning of the Links Use Global Above Below 


Read More Text Lanjut Baca 


") 


Alternative Layout | 


Memasukkan kata di dalam kotak teks “Read More Text” 


Setelah Anda simpan, maka tombol Read More yang muncul di dalam 
situs Joomla akan diganti dengan tulisan yang Anda buat sendiri. Lihat 
gambar di bawah ini: 


fotografi berjenis consumer 
photography seperti wedding 
photography, event photography 
portrait dan studio, serta 


Anda akan dibantu mengolah foto 
dan menyembunyikan kelemahan- 
kelemahan yang ada di dalam diri 
: 1 seorang model dengan benar dan 
pemasukan pasif dari penjualan Ha 
foto-foto koleksi lama kepada 


korporasi yang membutuhkan » Read more: Photoshop Top 


' - 2 Model 
» Lanjut BacaKiat Mencari Uang 
dari Bisnis Fotografi DSLR Rp.34,800.00 
Guantity: 1 


Rp.0.00 


Tombol yang telah diubah tulisannya sesuai teks yang Anda 
ketik di dalam kotak “Read More Text” di atas 


Agar Bisa Menulis Artikel dalam Mode HTML 


Untuk pengguna expert yang mengetahui bagaimana caranya menulis 
artikel menggunakan tag-tag HTML, maka Joomla menyediakan 
tombol Toggle Editor. Tekan tombol itu dan akan terlihat “mentahan” 
artikel, yaitu tulisan yang dipenuhi oleh tag-tag HTML. Tulislah tag 
HTML untuk mengatur bagaimana artikel akan disajikan di dalam 
situs. 


10 


—2x ea 
Jika Anda ingin belajar membuat website "masa depan", mulailah belajar HTML5 dan CS$3 sekaligus. 


Alasannya, karena baik HTMLS maupun CSS3 akan menjadi standar desain website dalam beberapa tahun ke depan. 


Oleh karena itu, supaya tidak ketinggalan jaman, Anda harus menguasai dua script tersebut mulai dari sekarang 
bi 


Di dalam buku ini, Anda akan mempelajari konsep dasar HTML5, termasuk memahami mengapa HTML5 disebut 
semantik dan apa peran CSS3 serta JavaScript bagi script tersebut. 


Anda akan mempelajari tag-tag baru, termasuk Canvas, serta mengatur bagaimana halaman website akan terlihat 
cantik di dalam jendela browser. 


Path: p 


@ Toggle editor 


Di Article Iki Image & Page Break V Read More 


Tombol Toggle Editor membantu Anda membuat artikel 
menggunakan tag-tag HTML 


Menulis Artikel Khusus Member yang Teregistrasi 


Anda ingin membuat situs member-only? Situs seperti ini mewajibkan 
semua orang untuk mendaftarkan diri terlebih dulu agar bisa membaca 
artikel-artikel yang Anda suguhkan. Membuat artikel khusus untuk 
para anggota cukuplah mudah. Pilihlah menu kombo Access dan klik 
Registered. 


Status 


Published “ 


Access 


| Public “ 


Guest 
Public 


Special 


Memilih menu Access dan pilihlah Registered 


Tip dan Trik Seputar Artikel: Options 


Ketika Anda masuk ke dalam halaman Article Manager: Articles, akan 
Anda temukan ikon Options yang ada di pojok kanan atas. Secara 
umum, fungsinya digunakan untuk melakukan pengaturan-pengaturan 


1" 


yang sifatnya menyeluruh terhadap semua artikel. Jadi, perubahan yang 
terjadi tidak hanya per artikel, namun seluruh artikel. 


Im) Bath $ options ) @ Help 


Title “ 


Memilih opsi Options untuk mengatur artikel secara umum 


Menampilkan Deskripsi Kategori 


Setiap kategori yang Anda buat bisa diberi keterangan atau deskripsi 
seperlunya sehingga pengunjung tahu apa isi artikel-artikel yang di- 
golongkan dalam kategori itu. Namun agar deskripsi itu bisa terlihat di 
dalam halaman situs, maka satu-satunya cara adalah dengan meng- 
aktifkan opsi Show pada Category Description. Caranya: klik tab 
Category dan pilihlah opsi Show di bagian Top Category 
Description. 


Articles Editing Layout Category Categories Blog / 


These settings apply for Articles Categfries OptionsNunless they are 


Top Level Category Description | Hj 
Subcategory Levels All 


Empty Categories Show 


Pilih Show pada opsi Category Description 


Sekarang cobalah simpan dengan menekan tombol Save. Nanti akan 
terlihat deskripsi di bawah nama kategori itu. 
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This Site 


Home 

Login 

Site Administrator 
Shopping Cart 
Buku Komputer 


Buku Bisnis 


Buku Komputer 


Artikel-artikel serta info produk terbayg terkait dengan buku komputer 


Buku Pintar HTML5 4 CSS3 #« DreamWeaver CS6 


Category: Buku Komputer 

Published on Monday, 14 January 2013 16:34 

Written by Super User 

Hits: 27 

Aa Jika Anda ingin belajar membuat website "masa 1 
CSS3 sekaligus 


bls da Alasannya, karena baik HTML5 maupun CSS3 al 
#DREAMWEAVER CS6 dalam beberapa tahun ke depan 


Oleh karena itu, supaya tidak ketinggalan jaman 
Aa tersebut mulai dari sekarang dengan membaca b 


Deskripsi di bawah nama kategori yang sudah dibuat 


Agar Pembaca Tidak Menemukan Kategori yang Kosong 


Saat mendesain situs, mungkin saja Anda membuat kategori-kategori 
artikel secara lengkap tanpa memperhatikan kesiapan artikel untuk 
tiap-tiap kategori itu. Akibatnya, jika Anda tidak sanggup membuat 
artikel untuk seluruh kategori maka akan ada kategori yang kosong. 
Bagaimana jadinya kalau pengunjung mengklik kategori dan tidak ada 
artikel apa pun? Jika memang masih ada kategori-kategori yang kosong 
(tidak mengandung artikel), maka sembunyikan saja kategori itu. Klik 
menu Category dan pilih Hide pada pilihan Empty Categories. 


Empty Categories Show 


Subcategories Descriptions | Hige Show 


# Articles in Category Hide 


Pilih Hide untuk Empty Categories 
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Mengatur Layout pada Halaman Muka Situs 


Bagaimana artikel-artikel akan ditata untuk halaman muka (homepage) 
situs yang Anda miliki ini? Apakah ingin ditata dalam bentuk kolom- 
kolom? Berapa artikel yang akan disajikan? Untuk mengaturnya, klik 
tab Blog/Featured Layouts. Selanjutnya, isi dengan nilai-nilai sebagai 
berikut: 


Articles Editing Layout Category Categories Blog / Featured Layouts 


These settings apply for blog or featured layouts unless they are changed for a specific me 


# Leading Articles 1 
# Intro Articles - 
# Columns 2 
# Links 4 
Multi Column Order Down “ 


Mengatur layout dengan cara mengisi angka di dalam kotak- 
kotak teks 


e Leading Articles: mengatur jumlah artikel utama yang akan 
muncul di dalam halaman muka. Lihat bagian (A) pada gambar 
di halaman berikut ini. 


e Intro Articles: mengatur jumlah seluruh artikel yang akan 
ditampilkan di dalam halaman muka. 


e  Columns: mengatur jumlah kolom yang ingin dibuat. 


e Links: mengatur jumlah artikel yang akan disajikan dalam 
bentuk link. 
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This Site Buku Pintar HTMLS5 # CSS3 # DreamWeaver CS6 
Home -.i 


“AG 


" disetut semantik dar a JaSeript bagi sergt 
| erse 
Login Form 
» Read more: Buku Pintar MTMLS « CSS) « DreamVenver CS6 
User Nama Rp49.800 00 


mmbuat website "masa depan", muladah belajar HTMLS dan 


Logan 


/L5 mmsupun CSS3 akan menjadi standar desain website 


antity 1 
Password 


Remember Me 


#Log Im 


Kiat Mencari Uang dari Photoshop Top Model Mengenal Levels, Curves, 
Bisnis Fotografi DSLR dan Histogram Photoshop 


Leading Article akan disajikan secara eksklusif dalam kolom 
yang lebih lega 


Mengatur Image Float 


Secara default, foto akan ditampilkan di sebelah kiri artikel. Namun 
Anda bisa menggesernya ke kanan dengan mengklik tab Editing 
Layout. Setelah itu, pilih Intro Image Float dan klik Right. 


Intro Image Float v 


Full Text Image Float Left " 


Memilih Right untuk pilihan Intro Image Float 


Refresh situs Anda dan akan terlihat pergeseran foto itu di dalam 
halaman muka. Kali ini akan tergeser ke arah kanan. 


Buku Pintar HTML5 4 CSS3 4 DreamWeaver CS6 


Jika Anda ingin belajar membuat website "masa depan", mulailah belajar HTML5 dan || 

CSS3 sekaligus 

Alasannya, karena baik HTML5 maupun CSS3 akan menjadi standar desain website hthLs,G Cc 
dalam beberapa tahun ke depan #DREAMWEAVER CS6 


Oleh karena itu, supaya tidak ketinggalan jaman, Anda harus menguasai dua script 
tersebut mulai dari sekarang dengan membaca buku ini 


Di dalam buku ini, Anda akan mempelajari konsep dasar HTML5, termasuk memahami 


mengapa HTML5 disebut semantik dan apa peran CSS3 serta JavaScript bagi script 
tersebut 


? Read more: Buku Pintar HTML5 - CSS3 « DreamWeaver CS6 


Rp.49,800.00 
Guantity: 1 


Kiat Mencari Uang dari Photoshop Top Model Mengenal Levels, Curves, 
Bisnis Fotografi DSLR Ka dan Histogram Photoshop 


Foto artikel yang digeser ke arah kanan 


Mengatur Jumlah Huruf di dalam Tombol Read More 


Ketika Anda menggunakan pemecah artikel dalam bentuk tulisan 
“Read More” maka Joomla akan menyajikan tulisan yang diambil dari 
judul artikel itu, di sebelah kanan teks “Read More”. Secara default, 
tombol itu bisa menampung 100 karakter sehingga jika judul artikel itu 
cukup singkat, maka akan ditampilkan di tombol itu secara utuh. 
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Di dalam buku ini, Anda akan mem 


mengapa HTML5 disebut semantik 
tersebut. 


? Read more: Buku... 


Rp.49,800.00 
Guantity: 1 


Tombol “Read More” mengandung karakter-karakter yang 
jumlahnya bisa diatur 


Namun Anda bisa mengecilkan jumlah karakter itu dengan cara 


mengklik tab Articles dan masukkan jumlah karakter yang diinginkan 
di dalam kotak teks Read More Limit. 


Show Title with Read More | Hige 


Read More Limit (») 


Menentukan jumlah karakter yang bisa terlihat di dalam tombol 
Read More Limit 


Tip dan Trik CKEditor 


CKEditor adalah editor tambahan yang bisa dimasukkan ke dalam 
sistem Joomla agar artikel yang Anda buat nanti menjadi lebih kaya 
konten. Download CKEditor lewat alamat situs berikut: 


http://extensions.joomla.org/extensions/edition/editors/12821 


Setelah itu, instal CKEditor ke dalam sistem Joomla lewat Ad- 
ministrator. Lihat Appendix tentang cara instalasi extension. Kalau 
proses instalasi sudah berhasil, maka lakukan langkah-langkah awal di 
bawah ini untuk mengganti editor default menjadi CKEditor: 
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1. Pilih menu System dan klik Global Configuration. 
2. Klik menu Default Editor dan pilihlah Editor - CKEditor. 


Default Editor " Editor - TinyMCE 


Editor - CKEditor 
Default Captcha " 


Editor - None 
Editor - TinyMCE 


Default Access Level " 


Default List Limit 20 - 


Memilih opsi Editor - CKEditor 


3. Tekan tombol Save & Close. 


Sekarang, cobalah membuat atau mengedit artikel menggunakan 
Joomla. Nanti akan terlihat ikon-ikon Editor seperti pada gambar di 
bawah ini: 


Asue GDBaD ah Ia 
Bul.U Su. si» 3 Bj 


Styles - || Format "|| Font -|l sie - || A- B- 


Jika Anda ingin belajar membuat website "masa depan", mulailah belajar HTML5 dan CSS3 sek 
Alasannya, karena baik HTML5 maupun CSS3 akan menjadi standar desain website dalam bebi 


Oleh karena itu, supaya tidak ketinggalan jaman, Anda harus menguasai dua script tersebut mu 


Di dalam buku ini, Anda akan mempelajari konsep dasar HTML5, termasuk memahami mengap: 
script tersebut 


Anda akan memoelaiari tao-taa baru. termasuk Canvas. serta menoatur bagaimana halaman we 
body p 


CKEditor yang sudah dilengkapi dengan berbagai macam ikon 


Cara Copy-Paste dari MS Word 


Anda bisa menulis artikel menggunakan MS Word dan kemudian di- 
paste ke dalam editor Joomla. Mengapa harus menulis artikel memakai 
MS Word? Biasanya, karena lebih praktis. Anda bisa membuat tulisan 
dengan berbagai “ornament” seperti efek tebal, miring, dan seterusnya. 


Untuk melakukan copy-paste artikel dari MS Word ke dalam editor 
Joomla, lakukan langkah-langkah berikut ini: 


1. Masuklah ke dalam MS Word dan blok teks yang akan dikopi. 


2. Setelah itu, tekan tombol Ctrl-C untuk mengkopi teks yang sudah 
diblok itu. 


3. Kalau sudah, masuklah ke dalam editor Joomla. 


4. Pilih ikon Paste from Word yang ada di Editor CKEditor. 


@: 


Memilih ikon Paste from Word 


TE) 


5. Nanti akan muncul jendela kecil tempat meletakkan teks yang 
sudah Anda kopi dari MS Word. Tekan tombol Ctrl--V. 


Paste from Word x 


Because of your browser security settings, the editor is not 
able to access your clipboard data directly. You are reguired to 
paste it again in this window. 


Please paste inside the following box using the keyboard 
(Ctri/Cmd-V) and hit OK 


1 Pilih menu System dan klik Global 
Configuration 


2 ki menu Default Editor dan pilihlah Editor 
— CKEditor v 


Cancel 
ka p 


Teks yang telah dikopi dari MS Word 
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6. Tekanlah tombol OK untuk memindahkan teks itu ke dalam 
editor. 


Asource GDha bb ah aa 
aa SL BA rt Ma ME si» RI 


Styles "|| Normal - || Font “|! Size -| A- B- 
http://extensions.joomla.org/extensions/edition/editors/12821 


Setelah itu, install CKEditor ke dalam sistem Joomla lewat Administrator. | 
maka lakukan langkah-langkah awal di bawah ini untuk mengganti editor di 


1 Pilih menu System dan klik Global Configuration 


2 Klik menu Default Editor dan pilihlah Editor — CKEditor 
body p 


Teks yang dikopi dari MS Word ke dalam CKEditor 


Menggunakan Paste as Plain Text 


Kalau Anda mengetik menggunakan MS Word dan ingin di-paste ke 
dalam CKEditor tanpa “ornament” (tidak ada efek tebal, miring, dan 
seterusnya), maka pilihlah ikon Paste as Plain Text. 


toh 1 


IG Gi 


Memilih ikon Paste as Plain Text 


Nanti akan terlihat lagi jendela untuk mem-paste teks (dengan me- 
nekan tombol Ctrl-V). Paste saja dan kalau sudah, tekan tombol OK. 


Mencari dan Mengganti Teks di dalam Editor 


Kalau Anda menulis artikel yang panjang, mungkin akan cukup repot 
jika menemukan kata yang salah dan harus diganti. Namun dengan 
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menggunakan CKEditor, mencari dan mengganti teks pun menjadi 
mudah dan praktis. Berikut langkah-langkahnya: 


Pilihlah ikon Replace yang ada di dalam CKEditor. 


la) 


Memilih ikon Replace 


1. 


“li 
fi 


Carilah teks yang akan diganti di dalam kotak teks Find What. 


3 
Sedangkan untuk kotak teks Replace with, ketiklah dengan teks 


3 
pengganti. 

4. Tekan tombol Replace jika ingin mengganti teks satu demi satu. 
Jika ingin melakukan penggantian massal, tekan tombol Replace 


All. 


Find and Replace 
Find Replace 


Find what: alamat Replace 


Replace All 


Replace with: | address 


Find Options 


Match case 
Match whole word 


Match cyclic 


« 


Cancel 


Mencari teks dan menggantinya dengan teks lain 


Nanti Anda akan menemukan tiga buah kotak cek untuk memak- 


simalkan proses pencarian, yaitu: 
Match Case: mencari teks yang benar-benar tepat. Jadi, huruf 


() 
kapital dan huruf kecil akan diperhitungkan. 
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e Match Whole Word: mencari teks secara utuh. Teks “modo” 
dan “komodo” akan dianggap teks yang berbeda. 


e Match Cyclic: akan mencari teks dalam seluruh artikel. 


Memunculkan Blok Paragraf 
Kadang-kadang, sulit untuk membedakan mana yang paragraf baru dan 


baris baru. Untuk mengetahui perbedaannya, munculkan blok-blok di 
dalam editor dengan mengklik Show Blocks. 


Ikon yang digunakan untuk memunculkan blok 
Setelah menekan ikon ini, maka akan muncul blok-blok di dalam 


editor. Huruf “p” kecil di dalam blok itu menunjukkan kalau bagian 
tersebut adalah paragraf. 


Styles "|| Normal "|| Font “| Sie -|l A- B- 


F 


3 
http://extensions.joomla.org/extensions/edition/editors/12821 


F 


: 
Setelah itu, install CKEditor ke dalam sistem Joomla lewat Administrator. Lihat Ap 
maka lakukan langkah-langkah awal di bawah ini untuk mengganti editor default mx 


F 


body p 


Blok-blok paragraf di dalam editor 


Mencetak Artikel yang Ada di dalam CKEditor 
Sebelum dipublikasikan pun, artikel yang masih ada di dalam CKEditor 


bisa dicetak. Caranya adalah dengan mengklik ikon Print seperti 
terlihat pada gambar di bawah ini. 
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BO TOL 


Memilih ikon Print untuk mencetak artikel di dalam CKEditor 
Untuk mulai proses pencetakan, tekan saja tombol Print. Anda juga 


bisa mengatur berapa banyak artikel itu akan dicetak dengan me- 
masukkan angka di dalam kotak teks Copies. 


Siap mencetak dengan menggunakan jendela Print 


Agar Teks Bisa di-Layout dengan Indah 


Salah satu faktor yang membuat sebuah situs—atau artikel yang ada di 
dalamnya—tampak indah dan menarik adalah Layout. Padahal secara 
teknis, membuat layout itu sulit. Untungnya, CKEditor dilengkapi 
dengan fitur untuk pengaturan layout. Berikut langkah-langkah meng- 
gunakannya: 


1. Mulailah dengan sebuah artikel baru. 


2. Lantas, pilihlah ikon Templates. 


Memilih ikon Templates untuk mengatur layout artikel 


3. Pilih salah satu layout yang Anda inginkan. Sebagai contoh, pilih 
Image and Title. 
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Image and Title 
One main image with a title and text that 
surround the image. 


Strange Template 
A template that defines two colums, each 
one with a title, and some text 


WI Replace actual contents 
Pilih Image and Title sebagai salah satu contoh layout 


4. Sekarang, tulislah teks sesuai dengan layout yang telah disediakan. 


BI USxX.xe|kI3 


Styles - Heading3 - Font - 


Type the title here 


Type the text here 


Membuat artikel menggunakan layout yang telah disediakan 


Untuk memasukkan gambar, klik-ganda kotak yang telah disediakan 
itu dan ikuti langkah-langkah pemasangan yang terlihat di dalam layar 
monitor. 


Memasang Foto Menggunakan URL 


Kalau Anda membuat layout seperti pada trik di atas, maka pertanyaan 
selanjutnya adalah, bagaimana caranya memasang foto di dalam kotak 
yang telah disediakan? Repotnya, CKEditor tidak mengizinkan Anda 
meng-upload foto secara langsung. Jadi satu-satunya cara adalah 
dengan memasukkan alamat URL yang langsung merujuk ke gambar 
atau foto yang hendak dipasang. Asumsikan Anda sudah mengunggah 
foto di dalam Media Manager, maka lakukanlah langkah-langkah se- 
bagai berikut: 
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1. 


Pilihlah menu Content » Media Manager. 


System v Users v Menus v Content v 


Components v 


Article Manager 


Media Manager 
Category Manager 
Ha Create Folder X Delete Featured Articles 


#5: Thumbnail View | 5 Media Manager 


Memilih opsi Media Manager 


Klik pada foto yang ingin dimasukkan ke dalam artikel. 


we 


Pilihlah foto yang akan dimasukkan ke dalam artikel 


Nanti foto itu akan ditampilkan dalam ukuran besar. Klik-kanan 
dan pilihlah Copy Image URL (jika menggunakan Firefox, maka 
pilih Copy Image Location). 


Setelah itu, kembalilah ke Editor. Klik-ganda kotak tempat foto 
atau gambar yang akan diberi foto. 


Styles - || Normat — - || Font - 


Type the title here 


ype the text here 


Klik-ganda pada persegi empat di mana foto akan diletakkan 
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Pastikan kursor berada di dalam kotak cek URL. 


6. Tekan tombol Ctrl-V untuk memasang alamat situs yang langsung 
merujuk pada foto yang tadi telah dikopi. 


7. Untuk memberi jarak antara teks dan foto, masukkan angka di 
dalam kotak teks HSpace dan VSpace. Anda bisa mengecek 
tampilan foto itu terhadap teks di dalam panel Preview. 


8. Jika sudah, tekanlah tombol OK. 


Preview 


Lorem ipsum dolor sitamet, A 
consectetuer adipiscing elit. 
Maecenas feugiat conseguat 
diam. Maecenas metus. 
Vivamus diam purus, cursus 

a, commodo non, facilisis 

vitae, nulla. Aenean dictum 


lacinia tortor. Nunc iaculis, 
nibh non iaculis aliguam, orci felis euismod negue, 
sed ornare massa mauris sed velit. Nulla pretium 
mi etrisus. Fusce mi pede, tempor id, cursus ac, 
ullamcorper nec, enim. Sed tortor. Curabitur 


Jarak foto terhadap teks 


Kapan pun ingin “Mengintip” Situs Joomla 


Ketika Anda melakukan konfigurasi terhadap Joomla dari backend 
(wilayah Administrator), maka bisa jadi tampilan situs Joomla akan 
berubah terus. Nah, untuk melihat bagaimana “penampakan” terakhir 
situs Joomla ketika diedit, cukuplah dengan klik link View Site yang 
ada di pojok kanan atas pada halaman Administrator tersebut. 


“0 MViewSie @ Logout 


Klik link View Site untuk “mengintip” situs Joomla yang telah 
diubah konfigurasinya lewat halaman Administrator 
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Menampilkan Menu Berisi Artikel-Artikel 

yang Paling Sering Dibaca 

Untuk membantu pembaca menemukan artikel-artikel yang paling 
sering dibaca, Anda bisa meletakkan menu “Article Most Read” meng- 


gunakan module standar Joomla yang telah disediakan. Berikut lang- 
kah-langkahnya: 


1. Pilih menu Extensions dan klik pada opsi Module Manager. 


2. Klik pada pilihan Articles Most Read. 


IN Title Status Position 
CL) Archived Articles None 
LJ Latest News None 
CJ Articles Most Read None 
L) Feed Display None 
C1) News Flash None 


Pilihlah opsi Articles Most Read 
3. Di bagian Title, Anda bisa menggantinya menjadi: Artikel 
Populer. 


4. Tekan tombol Select Position dan klik beez 20 (template standar 
saat ini) yang ada di samping kanan Position-6 agar menu ini 
diletakkan di sisi kanan atas. 


v. Cc R 7 D 
position-6 te » (Right top 
Pilih Position-6 untuk beez 20 


5. Di dalam Menu Assignment, klik menu kombo Module Assign- 
ment dan pilihlah Only on the pages selected. 


6. Klik pada opsi Getting Started. 
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Menu Assignment 


Module Assignment Only on the pages selected v 
Menu Selection: Select All | Clear Selection | Toggle Selection 
About Joomla || Australian Parks | FruitShop || Main Menu || Top || User Menu 
Select All | Clear Selection | Toggle Selection 
MI -GettingStated 0 Ce Related Items 


Menentukan halaman di mana menu “Artikel Populer” 
diletakkan 


7. Tekan tombol Save & Close jika sudah. 


Setelah itu, masuklah ke dalam situs Joomla dan pilih menu 
Getting Started. Anda akan masuk ke dalam halaman Getting 
Started itu dan melihat menu “Artikel Populer” di sisi kanan atas. 


ES - Administration x (9 Getting Started 


(9 jubileejoomla.byethost7.com/inde p/getting-s d , 
mm ———— 3 


You are here: Home » Getting Started CLOSE INFO 


About Joomla! Getting Started Artikel Populer 
Getting Started sa » Australian Parks 
Using Joomla! Its easy to get started creating your website. Knowing » Directions 


some of the basics will help. » Fruit Shop 
The Joomla! 


Pp . 
1yeet What is a Content Management System? 


The Joomla! 


A content management system is software that allows 
Community 


you to create and manage webpages easily by separating 
the creation of your content from the mechanics reguired 
This Site to present it on the web. 


Menu “Artikel Populer” di sebelah kanan pada halaman Getting 
Started 


Apa yang Disebut Breadcumbs? 


Selama bekerja menggunakan Joomla, maka akan melihat istilah 
“Breadcumbs” ini berkali-kali. Apa itu “Breadcumbs”? Ini adalah istilah 
Joomla untuk menunjuk link kecil yang ada di pojok kiri atas pada 
setiap halaman yang berfungsi memandu Anda kembali ke halaman 
depan (Home). 
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You are he ting Started 


About Joomla! Getting Started 


Getting Started 


Using Joomla! Its easy to get started creating 


Area yang disebut dengan istilah “breadcumbs” 


PEDE 
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